body{
 background-image: url(gallerycss/cork.JPG);
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;
 margin: 0;
}

#header{
  position: fixed;/*追従ナビのためpositionをfixedにする*/
  z-index: 5;
  top:0;/*ポジション設定topを0*/
  left:0;
  height: 4.0vw;/*headerの高さを指定*/
  width:100%;/*position:fixed;にしたため、横幅100%を設定*/
  background:#333;
  color:#fff;
  text-align: center;
  padding: 10px;
}

.space{
  font-size: 6.0vw;
}

section{
  padding: 50px 0;
}
  
#page-link{
  padding-top: 0px;
  
}

.spacetop{
  position: relative; 
  top: -1vw;
  left: 10%;
  display: flex;
}


.migiyose{
 position: relative; left: 50%;
}

.nakayose{
 text-align: center;
}

.nakayose2{
  position: relative; left:23%;
  
}



.index1{
 float: right;
 padding: 2.5vw;
 font-size: 2.5vw;
 max-height: 33vh;
 text-decoration-color: #494a41;
 font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.titlesize1{
 font-size: 50px;
 text-align: center;
}

@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

h1 {
 font-family: 'Sacramento', cursive;
 font-size: 2vw;
}

.photosupo{
  width: 30vw; height: auto; top:50%;
  position: relative; top: 0%; left: 50%; 
  transform: translateX(-50%);
}


.mainphoto{
 width: 50%; height: 50%;
 position: relative; bottom: 0%; left: 50%; 
 transform: translateX(-50%);
 border: 2rem ridge #fff; bottom: 0; right: 0;
}




.overviewtext{
 text-align: center;
 font-size: 1.6vw;
 text-decoration-color: #ffffff;
 font-weight: 700;

}

.diary{
 text-align: center;
 font-size: 50px;
 text-decoration-color: #494a41;
 font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


.photo2{
  width: 35%;  height: 35%;
  position: relative; left: 10%; 
  overflow: hidden;
}

.photo3{
  width: 35%;  height: 35%;
  position: relative; top: 0%; right: -57%;
  
}

.relative{
  position: relative;
}

.photo4{
  width: 56vw;  height: auto;
  position: absolute; top: -2vw; left: 51%;
  z-index: 3;
  transform: translate(-50%);
}


/*ニュース欄*/
.inline_box {
  width: 50vw;
  height: 20vh;
  position: relative;
  left: 0%;
  overflow: auto;
  background: #d6c6af;
  border: 1rem solid #494a41;
  padding: 10px;

}



/*items kiji*/

.flex{
  display: flex;
}

/*表題付箋紙*/
.inline_box2 {
  width: 20vw;
  height: 16vw;
  position: relative; right: -18%; top: 10%;
  overflow: auto;
  background: #d6c6af;
  border: 0.6rem solid #494a41;
  padding: 10px;

}

.inline_box3 {
  width: 20vw;
  height: 16vw;
  position: relative; left: -10%;
  overflow: auto;
  background: #d6c6af;
  border: 0.6rem solid #494a41;
  padding: 10px;

}

.title2{
 text-align: center;
 text-decoration: #333;
 font-size: 1.5vw;
 font-family: 'Amatic SC', cursive;
}

.contents{
 text-decoration: underline;
 font-size: 0.8vw;
}




.photo5{
  width: 35%;  height: 35%;
  position: relative; top: 0%; left: 20%;
  border: 1rem solid #fff;
}


.photo100{
 position: absolute; top: 700%; left: 30%; 
 max-width: 450px; max-height: 300px;
 background-color: white;
 width: 450px;  height: 300px;
 object-fit: contain;
}
  
/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#942D2F;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

#page-top a:hover{
 background: #777;
}

/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 10px;
    bottom:10px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
    animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
    animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
      opacity: 1;
    transform: translateY(0);
  }
  to {
      opacity: 1;
    transform: translateY(100px);
  }
}

#footer{
  position: relative;
  z-index: 2;
}